<template>
  <main>
    <section>
      <div class="container">
        <div class="content">
          <div class="content-left">
            <h3 class="left-title">
              <i class="bi bi-book-half"></i>
              欢迎来到学生实习系统
            </h3>
          </div>
          <div class="content-right">
            <form action="">
              <ul class="right-switch">
                <li
                  class="switch-one"
                  :class="{active : obj.isActive}"
                  @click="swtichBtn('one')"
                  >学号验证</li>
                <li
                  class="switch-two"
                  :class="{active : !obj.isActive}"
                  @click="swtichBtn('two')"
                >手机号验证</li>
              </ul>
              <input type="number" :placeholder=aaa v-model.lazy="login.list.num">
              <div class="psw" v-show="obj.isActive">
                <input :type="obj.isPsw" placeholder="请输入密码" v-model.lazy="login.list.psw">
                <i
                  :class="obj.isSee"
                  class="bi see-psw"
                  @click="switchSee()"
                ></i>
              </div>

              <div class="psw" v-show="!obj.isActive">
                <input type="text" placeholder="请输入验证码" v-model.lazy="login.list.psw2">
                <canvas width="100" height="38" id="captcha1"></canvas>
              </div>

              <button
                v-show="obj.isActive"
                type="button"
                @click="getData(login.list.num)"
              >登录</button>

              <button
                v-show="!obj.isActive"
                type="button"
                @click="phoneNumber(login.list.num)"
              >登录</button>

              <div class="support">
                <input type="checkbox" id="agree" checked>
                <label for="agree">同意
                  <a href="/home">《用户协议》</a>

                  和
                  <a href="/home">《隐私政策》</a>

                  <!-- <LoginJump
                    v-if="1"
                  /> -->
                </label>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>

  </main>

  <footer>
    <div class="container">统一身份认证平台 2023</div>
  </footer>
</template>

<script setup>
import { watch, ref, reactive,onMounted } from "vue"
import router from "../router";

//引入store钩子
import useCounterStore from '@/stores/counter.js'
//实现仓库数据双向绑定
import {storeToRefs} from 'pinia'
import axios from "axios";

import Captcha from 'captcha-mini'

let aaaa

onMounted(()=> {
  // const yanzhengma = ()=> {
    const canvas = document.querySelector('#captcha1')
    let captcha1 = new Captcha();
    
    captcha1.draw(canvas, r => {
        console.log(r, '验证码1');
        aaaa = r
    });
  // }
})

const phoneNumber = (phone)=> {
  axios.get(`http://127.0.0.142:9001/test/login_3.php?phone=${phone}`).then(re=> {
    if (login.list.num == phone && login.list.psw2 == aaaa) {


      localStorage.setItem("token",re.data[0].id)
      
      localStorage.setItem(
        "teacher", re.data[0].teacher
      )

      re.data[0].teacher == null ? router.push("/") : router.push("/teacher")

    }else{
      alert("验证码错误或手机号不存在")
    }
  }).catch(e=> {
    console.log(e);
  })
}

//创建仓库对象
const store=useCounterStore()
let {isLogin}=storeToRefs(store)


let login = reactive({
  list: {
    num: "",
    psw: "",
    psw2: ""
  },
  
})

let obj = reactive({
  isSeeClick: false,
  isSee: "bi-eye-slash-fill",
  isPsw: "password",
  
  isActive: true,
  
})

let aaa = obj.isActive ? "请输入手机号" : "请输入学生号"
// 密码可视
const switchSee = ()=> {
  obj.isSeeClick = !obj.isSeeClick
  obj.isSee = obj.isSeeClick ? "bi-eye-fill" : "bi-eye-slash-fill"
  obj.isPsw = obj.isSeeClick ? "text" : "password"
}

// 学号or手机号
const swtichBtn = (who)=> {
  obj.isActive = who == "one" ? true : false
}


const loginFn = (data)=> {

  if (login.list.psw == data.psw) {

    localStorage.setItem(
      "token", login.list.num
    )
    localStorage.setItem(
      "teacher", data.teacher
    )

    data.teacher == null ? router.push("/") : router.push("/teacher")

    !localStorage.getItem("token") && alert("身份认证过时，请重新登录")

    isLogin = true
  }else {
    alert("reset")
  }

  // console.log(data);


}


// api
const getData = function(num){
  axios.get('http://127.0.0.1:9001/test/login_2.php', {
      params: {
        "name": num
      }
    }).then(res=> {
      loginFn(res.data[0])
      console.log(res.data);
    }).catch(e=> {
      console.log(e);
    })


  // API({
  //     headers: {
  //         'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  //     },
  //     // url:'http://127.0.0.142:9001/test/login.php',
  //     url:'http://127.0.0.1:9001/test/222.php',
  //     data: {
  //       name: login.list.num
  //     },
  //     method:'GET'
  // }).then((res)=>{
  //   // console.log(res.data)
  //   loginFn(res.data)

  // }).catch((e)=>{
  //   console.log(e);
  // });

}

</script>

<style scoped>
.content {
  max-width: 706px;
  min-height: 470px;
  display: flex;
  background: rgba(30, 33, 38, .9);
  border-radius: 15px;
  margin: 150px auto;
}
.content-left {
  width: 48%;
  color: #fff;
  border-radius: 15px;
  background-image: -moz-linear-gradient(90deg, #8CC7B5, #19CAAD, #8CC7B5);
  background-image: -webkit-linear-gradient(90deg, #8CC7B5, #19CAAD, #8CC7B5);
  background-image: linear-gradient(90deg, #8CC7B5, #19CAAD, #8CC7B5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-left .left-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-left .left-title i {
  margin-bottom: 15px;
}
.content-right {
  display: flex;
  margin: 0 auto;
  align-items: center;
}
.content-right form {
  display: flex;
  flex-direction: column;
  color: #fff;
}
.content-right input:not([type="checkbox"]) {
  display: block;
  margin: 0 auto 20px;
  padding: 0 10px;
  width: 250px;
  height: 40px;
  outline: none;
  border-radius: 5px;
  border: none;
}
.content-right input[type="number"] {
    -moz-appearance:textfield;
}
.content-right input[type=number]::-webkit-inner-spin-button,
.content-right input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.content-right .right-switch {
  display: flex;
  width: 200px;
  justify-content: space-between;
  padding: 0;
  margin: 0 auto 40px;
}
.content-right .right-switch>li {
  list-style: none;
  cursor: pointer;
}
.content-right .right-switch>li.active {
  color: #19CAAD;
}
.content-right button {
  margin: 0 auto 40px;
  width: 250px;
  height: 40px;
  border: none;
  border-radius: 5px;
  font-weight: 700;
}
.content-right button:active {
  background: #19CAAD;
}
.content-right button:hover {
  background: #19CAAD;
  color: #fff;
}
.content-right .psw {
  position: relative;
  margin: 0 auto 40px;
}
.content-right .psw input {
  margin: 0;
  padding-right: 40px;
}
.content-right .psw canvas {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
.content-right .psw i {
  color: #000;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  cursor: pointer;
}
.content-right .support {
  display: flex;
  align-items: center;
}
.content-right .support input,
.content-right .support label {
  cursor: pointer;
}
.content-right .support label {
  margin-left: 10px;
}
.content-right .support a {
  text-decoration: none;
  color: #fff;
}
.content-right .support a:hover {
  text-decoration: underline;
}


footer {
  height: 40px;
  background: #8CC7B5;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

@media (max-width: 580px) {
  .content {
    flex-direction: column;
    margin: 50px auto 0;
  }
  .content-left {
    width: 100%;
    padding: 20px 0;
    margin-bottom: 30px;
  }
  .content-right .right-switch {
    margin-bottom: 20px;
  }
}
</style>